<template>
  <div class="layout">
    <div id="wrapperDiv">
      <div style="display: flex; justify-content: space-between">
        <Breadcrumb class="breadcrumb" :crumbs="crumbs"></Breadcrumb>
        <div class="backBtn" @click="goBack()">返回列表</div>
      </div>
      <div style="display: flex; justify-content: center">
        <div id="selectTypeDiv">
          <div
            :class="selectTypeIndex == 0 ? 'selectType btn' : 'btn'"
            @click="selectTypeIndex = 0">
            培训通知
          </div>
          <div
            :class="selectTypeIndex == 1 ? 'selectType btn' : 'btn'"
            @click="selectTypeIndex = 1">
            在线课程
          </div>
        </div>
      </div>
      <!--培训通知-->
      <div class="listDiv" v-show="selectTypeIndex == 0" v-loading="loading">
        <!-- <SearchFrame @search="searchResult" tip="关键字"/>
        <div class="selectBar2">
          <div>
            <el-select
              v-model.trim="query.status"
              placeholder="活动状态"
              size="small"
              style="width: 126px"
              @change="changeStatus">
              <el-option
                v-for="item in statusOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"></el-option>
            </el-select>
          </div>
          <div class="clearBtn" @click="clearSelect">清空筛选条件</div>
        </div> -->
        <div class="tableDiv">
          <el-table
            :data="trainNoticeList"
            border
            :highlight-current-row="false"
            style="width: 100%"
            header-cell-class-name="table-header">
            <el-table-column prop="organizerName" label="主办单位">
            </el-table-column>
            <el-table-column prop="title" label="培训标题">
              <template slot-scope="scope">
                <el-link @click="linkDetail(scope.row.id)">{{ scope.row.title }}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="modeName" label="培训方式" width="80">
            </el-table-column>
            <el-table-column prop="beginDate" label="报名时间" min-width="150">
              <template slot-scope="scope">
                {{ scope.row.beginDate }} 至 {{ scope.row.endDate }}
              </template>
            </el-table-column>
            <el-table-column
              prop="trainBeginTime"
              label="培训时间"
              min-width="180">
              <template slot-scope="scope">
                {{ scope.row.trainBeginTime }} 至 {{ scope.row.trainEndTime }}
              </template>
            </el-table-column>
            <el-table-column prop="address" label="地址" min-width="150">
            </el-table-column>
            <el-table-column label="操作" prop="isApply" align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  v-if="scope.row.isApply == 0"
                  @click="toSignUp(scope.row.id)">立即报名</el-button>
                <el-button disabled type="text" v-else>已报名</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div id="Pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
      <!--在线课程-->
      <div class="listDiv" v-show="selectTypeIndex == 1" v-loading="loading">
        <div class="videoBox">
          <VideoFrame
            class="videoFrame"
            v-for="video in onlineCourseList"
            :video="video"
            :url="'onlineCourseDetail'"
            :key="video.id"/>
          <div
            v-show="onlineCourseList.length % 3 == 2"
            class="virtualDom"></div>
        </div>
        <div id="Pagination" v-show="onlineCourseList.length > 0">
          <el-pagination
            @size-change="handleSizeChangeVideo"
            @current-change="handleCurrentChangeVideo"
            :current-page="pageNumVideo"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSizeVideo"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalVideo">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Breadcrumb from "@/components/breadcrumb";
import VideoFrame from "@/components/videoFrame";
import SearchFrame from "@/views/help/components/searchFrame";
// api
import config from "@/utils/config.js";
import { request, uploadFile } from "@/utils/request";

export default {
  name: "trainingNotice",
  components: { Breadcrumb, VideoFrame, SearchFrame },
  data() {
    return {
      loading: false,
      selectTypeIndex: 0,
      crumbs: [
        {label: "培训中心",value: "training"},
        {label: "企业培训通知",value: "trainingNotice",choose: true},
      ],
      pageNum: 1,
      pageSize: 10,
      total: null,
      pageNumVideo: 1,
      pageSizeVideo: 9,
      totalVideo: null,
      statusOptions: [
        {dictLabel: "报名中",dictValue: "0"},
        {dictLabel: "已结束",dictValue: "1"}
      ],
      query: {
        searchKey: '',
        status: ''
      },
      trainNoticeList: [],
      onlineCourseList: [], //在线课程列表
    };
  },
  async mounted() {
    if(this.$route.params.type){
      this.selectTypeIndex = this.$route.params.type
    }
    this.loading = true;
    await this.getTrainNoticeList();
    await this.getOnlineCourseList();
  },
  async activated() {
    this.loading = true;
    await this.getTrainNoticeList();
    await this.getOnlineCourseList();
  },
  methods: {
    searchResult(res) {
      this.query.searchKey = res
    },
    changeStatus(val) {
      this.query.status = val
    },
    clearSelect() {
      this.query.status = ""
    },
    // 点击立即报名按钮
    async toSignUp(id) {
      this.$CheckRole("培训活动报名", async () => {
        let formData = new FormData();
        formData.append("id", id);
        const { code, msg } = await uploadFile(
          this,
          config.api.signUpTrainNotice,
          formData,
          "POST"
        );
        this.loading = false;
        if (code != "200") return this.$message.warning(msg);
        this.$message.success("申请报名成功，请您准时参加培训！");
        this.getTrainNoticeList(); //更新列表数据（立即报名按钮变成已报名）
      })
    },
    // 跳转培训通知详情页
    linkDetail(id) {
      this.$router
        .push({ path: "/training/trainingNotice/trainNoticeDetail", query: { id } })
        .catch((err) => err);
    },
    // 获取培训通知列表
    async getTrainNoticeList() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      const { code, msg, rows, total } = await request(
        this,
        config.api.trainNoticeList,
        params,
        "GET"
      );
      this.loading = false;
      if (code != "200") return this.$message.warning(msg);
      this.trainNoticeList = rows;
      this.total = total;
    },
    // 获取在线课程列表
    async getOnlineCourseList() {
      let params = {
        pageNum: this.pageNumVideo,
        pageSize: this.pageSizeVideo,
      };
      const { code, msg, rows, total } = await request(
        this,
        config.api.onlineCourseList,
        params,
        "GET"
      );
      if (code != "200") return this.$message.warning(msg);
      this.onlineCourseList = rows;
      this.totalVideo = total;
    },
    // 改变培训通知每页大小
    handleSizeChange(e) {
      this.pageSize = e;
      this.getTrainNoticeList();
    },
    // 改变培训通知当前页
    handleCurrentChange(e) {
      this.pageNum = e;
      this.getTrainNoticeList();
    },
    // 改变在线课程每页大小
    handleSizeChangeVideo(e) {
      this.pageSizeVideo = e;
      this.getOnlineCourseList();
    },
    // 改变在线课程当前页
    handleCurrentChangeVideo(e) {
      this.pageNumVideo = e;
      this.getOnlineCourseList();
    },
    /**
     * 返回上一页
     */
    goBack() {
      this.$router.back();
      // this.$router.push({ path: 'help' });
    },
  },
};
</script>

<style lang="scss" scoped>
.selectBar2 {
  width: 600px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .clearBtn {
    width: 120px;
    height: 32px;
    line-height: 32px;
    background-color: #ffffff;
    // padding: 5px 15px;
    font-size: 13px;
    border-radius: 3px;
    transition: all 0.2s ease 0s;
    border: 1px solid #eeeeee;
    color: #606266;
    margin-left: 20px;
    text-align: center;
  }
  .clearBtn:hover {
    cursor: pointer;
    box-shadow: 0px 0px 5px #eeeeee;
  }
}

.layout {
  min-height: 100vh;
  position: relative;
  padding-bottom: 150px;
  box-sizing: border-box;
}

.breadcrumb {
  width: 1200px;
  margin-bottom: 30px;
}

#wrapperDiv {
  text-align: left;
  width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}

#wrapperDiv .backBtn {
  border: 1px solid #eeeeee;
  white-space: nowrap;
  font-size: 12px;
  height: 30px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}

#wrapperDiv .backBtn:hover {
  cursor: pointer;
  box-shadow: 0px 0px 5px #eeeeee;
}

#selectTypeDiv {
  width: 1200px;
  display: flex;
  border-bottom: 3px solid #d00000;
  padding: 0 20px;
  margin-bottom: 30px;
}

#selectTypeDiv div {
  padding: 5px 20px;
  font-weight: bold;
  margin-bottom: -1px;
}

#selectTypeDiv .selectType {
  background-color: #d00000;
  color: #ffffff;
}

#selectTypeDiv .btn:hover {
  background-color: #d00000;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease 0s;
}

/* 表格样式 */
#wrapperDiv .listDiv .tableDiv {
  margin: 18px 0;
  /* border: 1px solid #eeeeee; */
  color: #666666;
  font-size: 12px;
}

#wrapperDiv .listDiv .tableDiv >>> .table-header {
  background: #f4f4f4 !important;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

>>> .el-table tbody tr:hover > td {
  background-color: #ffffff !important;
}

#wrapperDiv .listDiv .tableDiv >>> .el-button--text {
  text-decoration: underline;
  color: #448dda;
}

.listDiv #Pagination {
  text-align: right;
  margin-bottom: 30px;
}

.listDiv .videoBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* .listDiv .videoBox::after{
        display: block;
        content: '';
        width: 295px;
        visibility: hidden;
    } */

.listDiv .videoFrame {
  width: 290px;
  margin-bottom: 20px;
}

.listDiv .videoFrame:hover {
  cursor: pointer;
}

.listDiv .virtualDom {
  width: 338px;
  margin-bottom: 20px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}
</style>